<!--
 * @Description: 用户管理页面
 * @Date: 2023-03-31 15:52:54
 * @LastEditTime: 2023-04-11 15:18:05
 * @Author: Black
 * @FilePath: \store_admin\src\views\user\list.vue
-->
<template>
	<el-card shadow="never" class="border-0">

		<ListHeader layout="create,refresh" @create="handleCreate" @refresh="getData">
			<SearchForm :model="searchForm" @search="getData" @reset="resetSearchForm">
				<SearchItem label="关键词">
					<el-input v-model="searchForm.keyword" placeholder="会员名称" class="w-full" @keyup.enter="getData" clearable>
						<template #prefix><el-icon>
								<Search />
							</el-icon></template>
					</el-input>
				</SearchItem>
				<SearchItem label="会员等级">
					<el-select v-model="searchForm.user_level_id" placeholder="请选择会员等级" clearable>
						<template #prefix><el-icon>
								<PriceTag />
							</el-icon>
						</template>
						<el-option v-for="item in user_level" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</SearchItem>
			</SearchForm>
		</ListHeader>

		<el-table :data="tableData" fit stripe style="width: 100%" v-loading="loading">
			<el-table-column label="会员" width="200">
				<template #default="{ row }">
					<div class="flex items-center">
						<el-avatar :size="40" :src="row.avatar">
							<img src="../../assets/images/avatar.png" />
						</el-avatar>
						<div class="ml-3">
							<h6>{{ row.username }}</h6>
							<small>ID:{{ row.id }}</small>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="会员等级" align="center">
				<template #default="{ row }">
					{{ row.user_level?.name || "-" }}
				</template>
			</el-table-column>
			<el-table-column label="登录注册" align="center">
				<template #default="{ row }">
					<p v-if="row.last_login_time">
						最后登录 : {{ row.last_login_time }}
					</p>
					<p>
						注册时间 : {{ row.create_time }}
					</p>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="100" align="center">
				<template #default="{ row }">
					<el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading"
						:disabled="row.super == 1" @change="handleStatusChange($event, row)">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="250" align="center">
				<template #default="scope">
					<small v-if="scope.row.super == 1" class="text-sm text-gray-500">暂无操作</small>
					<div v-else>
						<el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
						<el-popconfirm title="是否要删除该管理员？" confirmButtonText="确认" cancelButtonText="取消"
							@confirm="handleDelete(scope.row.id)" width="200px">
							<template #reference>
								<el-button text type="primary" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</div>
				</template>
			</el-table-column>

		</el-table>

		<div class="flex items-center justify-center mt-5">
			<el-pagination background layout="prev,pager,next" :total="total" :current-page="currentPage" :page-size="limit"
				@current-change="getData" />
		</div>

		<FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
			<el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="form.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="form.nickname" placeholder="昵称"></el-input>
				</el-form-item>
				<el-form-item label="头像" prop="avatar">
					<ChooseImage v-model="form.avatar" />
				</el-form-item>
				<el-form-item label="会员等级" prop="user_level_id">
					<el-select v-model="form.user_level_id" placeholder="选择会员等级">
						<el-option v-for="item in user_level" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机" prop="phone">
					<el-input v-model="form.phone" placeholder="手机"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="form.email" placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="content">
					<el-switch v-model="form.status" :active-value="1" :inactive-value="0">
					</el-switch>
				</el-form-item>
			</el-form>
		</FormDrawer>
	</el-card>

</template>
  
<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import FormDrawer from '~/components/FormDrawer.vue'
import ChooseImage from '~/components/ChooseImage.vue'
import {
	getUserList,
	updateUserStatus,
	createUser,
	updateUser,
	deleteUser
} from '~/api/user';
import ListHeader from "~/components/ListHeader.vue";
import SearchForm from "~/components/SearchForm.vue";
import SearchItem from "~/components/SearchItem.vue";
import { useInitTable, useInitForm } from '~/composables/useCommon.js'

const user_level = ref([])

const {
	searchForm,
	resetSearchForm,
	tableData,
	loading,
	currentPage,
	total,
	limit,
	getData,
	handleDelete,
	handleStatusChange
} = useInitTable({
	searchForm: {
		keyword: "",
		user_level_id: null
	},
	getList: getUserList,
	onGetListSuccess: (res) => {
		tableData.value = res.list.map(o => {
			o.statusLoading = false
			return o
		})
		total.value = res.totalCount
		user_level.value = res.user_level
	},
	updateStatus: updateUserStatus,
	delete: deleteUser
})

const {
	formDrawerRef,
	formRef,
	form,
	rules,
	drawerTitle,
	handleSubmit,
	handleCreate,
	handleEdit
} = useInitForm({
	form: {
		username: "",
		password: "",
		user_level_id: null,
		status: 1,
		avatar: "",
		nickname: "",
		phone: "",
		email: ""
	},
	getData,
	update: updateUser,
	create: createUser,
})

</script>
  